<template>
  <div class="pricing-stencil">
    <div class="header-breadcrumb">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="navigation-title">定价模板</div>
    <div class="line-between"></div>
    <!-- 搜索栏 -->
    <div class="navigation-search">
      <div class="search-left">
        <div class="navigation-search-input">
          <span>定价模板:</span>
          <el-select v-model="value" clearable placeholder="定价模板">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="navigation-search-input">
          <span>产品:</span>
          <el-input
            placeholder="产品名称、编号"
            suffix-icon="el-icon-search"
            v-model="productKeyword"
          >
          </el-input>
        </div>
        <div class="navigation-search-input">
          <span>类目:</span>
          <el-select v-model="value" clearable placeholder="请选择分类">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="navigation-search-input">
          <span>定价:</span>
          <el-select v-model="stateValue" clearable placeholder="请选择状态">
            <el-option
              v-for="item in stateData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="navigation-search-input">
          <el-button type="primary">搜索</el-button>
        </div>
      </div>
      <div class="navigation-search-right">
        <el-button type="primary" @click="onPricingTemplateManagement"
          >定价模板管理</el-button
        >
        <el-button type="primary" plain @click="isBulkPricingShow = true"
          >批量定价</el-button
        >
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="pricing-stencil-table">
      <div
        class="pricing-stencil-table-list"
        v-for="(item, index) in pricingData"
        :key="index"
      >
        <div class="pricing-stencil-table-list-img">
          <!-- <img class="image-100" :src="item.img_path" alt="" /> -->
          <el-image :src="item.img_path" class="image-100"></el-image>
          <div class="pricing-stencil-table-list-img-check">
            <el-checkbox v-model="item.isShow" @change="onChange"></el-checkbox>
          </div>
        </div>
        <div class="pricing-stencil-table-list-content">
          <div class="using-single-drug">
            {{ item.name }}
          </div>
          <div class="table-list-content-name">
            <span>类目:</span>{{ item.cate.title }}
          </div>
          <div class="table-list-content-name">
            <span>编号:</span>{{ item.sku }}
          </div>
          <div class="table-list-content-name using-single-drug">
            <span>材质:</span>{{ item.texture }}
          </div>
          <div class="table-list-content-name">
            <el-button type="warning" size="mini" v-if="item.pricing_id != 0"
              >预览定价</el-button
            >
            <el-button type="warning" size="mini">设置定价</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pricing-stencil-pagination">
      <el-pagination
        @size-change="stencilSizeChange"
        @current-change="stencilCurrentChange"
        :current-page="page"
        :page-sizes="[12, 16, 20, 24]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pricingTotal"
      >
      </el-pagination>
    </div>
    <!-- 批量定价 -->
    <div class="bulk-pricing">
      <el-dialog
        title="批量定价"
        :close-on-click-modal="false"
        :visible.sync="isBulkPricingShow"
        width="50%"
      >
        <BulkPricing />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isBulkPricingShow = false">取 消</el-button>
          <el-button type="primary" @click="isBulkPricingShow = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 物流费设置 -->
    <div class="logistics-fees">
      <el-dialog
        title="物流费设置"
        :close-on-click-modal="false"
        :visible.sync="isLogisticsFees"
        width="30%"
      >
        <LogisticsFees />
        <span slot="footer" class="dialog-footer">
          <el-button @click="setLogisticsFees(false)">返 回</el-button>
          <el-button type="primary" @click="setLogisticsFees(false)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import BulkPricing from './common/bulk-pricing.vue';
import LogisticsFees from './common/logistics-fees.vue';
import { mapMutations } from 'vuex';
import Pricing from '@/api/pricing';
import Way from '@/utils/way';

export default {
  name: 'pricingStencil',
  components: { Breadcrumb, BulkPricing, LogisticsFees },
  props: {},
  data() {
    return {
      headerTitle: ['管理设置', '定价模板'],
      value: '',
      checked: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      pricingData: [], // 定价模板列表
      pricingTotal: 0,
      stateData: [
        { label: '全部', value: 0 },
        { label: '已定', value: 1 },
        { label: '未定', value: 2 },
      ], // 定价类型
      stateValue: 0, // 定价类型参数
      productKeyword: '', // 产品名称、编号
      page: 1,
      limit: 12,
      isBulkPricingShow: false, // 批量定价
    };
  },
  computed: {
    // 设置物流费弹窗
    isLogisticsFees() {
      return this.$store.state['pricing-stencil'].isLogisticsFeesShow;
    },
  },
  watch: {},
  created() {
    this.getPriceTemplateList();
    this.getPricingList();
  },
  methods: {
    ...mapMutations(['setLogisticsFees']),
    onChange(val) {
      console.log(val);
    },
    stencilSizeChange(val) {
      this.limit = val;
      this.getPricingList();
    },
    stencilCurrentChange(val) {
      this.page = val;
      this.getPricingList();
    },
    // 定价模板管理
    onPricingTemplateManagement() {
      this.$router.push({ name: 'pricingManagement' });
    },
    // 获取产品定价模板
    getPricingList() {
      const that = this;
      const params = {
        page: this.page,
        limit: this.limit,
        title: this.productKeyword,
        cate_id: '', // 分类id
        temple_id: '', // 模板id
        state: this.stateValue,
        product_ids: '',
      };
      Pricing.getPricingList(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.pricingData = res.data.rows;
          that.pricingTotal = res.data.total;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 获取定价模板列表
    getPriceTemplateList() {
      const params = {
        page: 1,
        limit: 30,
      };
      Pricing.getPriceTemplateList(params).then((res) => {
        console.log(res);
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/navigation-search.less';

.pricing-stencil {
  // 数据列表
  .pricing-stencil-table {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;

    .pricing-stencil-table-list {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      box-sizing: border-box;
      width: 288px;
      margin: 0 12px 12px 0;
      border: 1px solid #ebebeb;

      .pricing-stencil-table-list-img {
        position: relative;
        width: 110px;
        height: 120px;
        .pricing-stencil-table-list-img-check {
          position: absolute;
          left: 6px;
          top: 2px;
        }
      }

      .pricing-stencil-table-list-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 145px;
        font-size: 14px;

        .table-list-content-name {
          .el-button {
            font-size: 12px;
          }
          .el-button--mini {
            padding: 7px 8px;
          }
        }
      }
    }
  }
  // 分页
  .pricing-stencil-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
  }
}
</style>
